import { useState, useMemo } from "react";
import {Link} from "react-router-dom";
import {Menu} from "antd";
import {
    RocketOutlined,
	MenuUnfoldOutlined,
	MenuFoldOutlined,
} from "@ant-design/icons";
import menuConfig from "@config/menu";
const Item = Menu.Item;
const SubMenu = Menu.SubMenu;
function Menus(props) {
    // 是否收缩
    const [collapsed, setCollapsed] = useState(false);
    // 菜单内容
    const menuContext = useMemo(() => menuConfig.map(item => {
        const Icon = item.icon;
        if(item.children && item.children.length){
            return <SubMenu key={ item.key } icon={ <Icon/> } title={ item.text }>
                {
                    item.children.map(cItem => <Item key={ cItem.key } >
                        <Link to={ cItem.route }>{cItem.text}</Link>
                    </Item>)
                }
            </SubMenu>;
        }
        return <Item key={ item.key } icon={ <Icon /> }>
            <Link to={ item.route }>{item.text}</Link>
        </Item>;
    }), []);
	return (
		<div className={ `menu  ${collapsed?"active": ""}` }>
			<div className="left_flex_hidden"></div>
			<aside className="context">
                <div className="logo">
                    <div className="icon">
                        <RocketOutlined />
                    </div>
                    <div className="text">后台管理系统</div>
                </div>
                <div className="menu_context">
                <Menu className="menu_ul" mode="inline" theme="dark" inlineCollapsed={ collapsed }>
                    {menuContext}
                </Menu>
                </div>
                <div className="collapsed_button" onClick={ () => setCollapsed(!collapsed) }>
                    <div className="icon">
                        {collapsed? <MenuUnfoldOutlined />: <MenuFoldOutlined />}
                    </div>
                </div>
            </aside>
		</div>
	);
}

export default Menus;
